<template>
     <div class="vedio" @click="$router.push('/detailpost?id='+ data.id)">
       <span class="text">{{data.title}}</span>
       <div class="cover">
           <img :src="data.cover[0].url" alt="">
           <div class="cover_layer">
               <span class="iconfont iconshipin"></span>
           </div>
       </div>
       <span class="author">{{data.user.nickname}}   {{data.comment_length}}跟帖</span>
  </div>
</template>

<script>
export default {
    props:['data']

}
</script>

<style lang="less" scoped>
     .vedio{
         padding: 20/360*100vw;
         border-bottom: 2px solid #cccccc;
         .text{
             color: #333;
             font-size: 16px;
         }
         .cover{
             width: 100%;
             height: 170/360*100vw;
             position: relative;
             img{
                 display: block;
                 width: 100%;
                 height: 100%;
             }.cover_layer{
                 width: 54/360*100vw;
                 height: 54/360*100vw;
                 background-color: rgba(0, 0, 0, 0.6);
                 position: absolute;
                 top: 50%;
                 left: 50%;
                 transform: translateX(-27/360*100vw) translateY(-27/360*100vw);
                 border-radius: 50%;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 .iconshipin{
                   font-size: 46/360*100vw;
                   color: #fff;
                 }
             }
         }
     }
</style>